<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>列表页</title>
    <style>
        *{
            margin: 0;
            padding: 0;
        }
        ul li{
            list-style: none;
        }
        ul{
            display: flex;
            width: 800px;
            padding: 10px;
            border: 1px solid red;
            margin: 30px auto;
        }
        li{
            width: 200px;
            padding: 10px;
            box-sizing: border-box;
        }
        li img{
            width: 100%;
        }
        li dl{
            text-align: center;
        }
        li dl dt{
            margin-bottom: 10px;
        }
    </style>
</head>
<body>
    <ul id='list'>
        <!-- <li id = '111' class='list-item'>
            <img src="./images/g1.jpg" alt="">
            <dl>
                <dt>阿联酋美女1号</dt>
                <dd>价格：1998</dd>
                <dd>年龄：20</dd>
            </dl>
        </li> -->
    </ul>

    <script>
        var goodlist = [
            { id: 111, url: './images/g1.jpg', name: '阿联酋美女1号', price: 1998, age: 20 },
            { id: 22, url: './images/g2.jpg', name: '阿联酋美女2号', price: 98, age: 18 },
            { id: 3325, url: './images/g3.jpg', name: '阿联酋美女3号', price: 998, age: 22 },
            { id: 4, url: './images/g4.jpg', name: '阿联酋美女4号', price: 9.8, age: 24 }
        ]

        // foreach循环渲染
        goodlist.forEach(function(item,index){
            list.innerHTML += '<li id = '+ item.id+ ' class="good_item"><img src="'+item.url+'" alt=""><dl><dt>'+item.name+'</dt><dd>价格：'+item.price+'</dd><dd>年龄：'+item.age+'</dd></dl></li>'
        });

        var lis = document.getElementsByTagName('li');

        // 绑定点击
        for(var i=0;i<goodlist.length;i++){
            // 拼接方式把ID传给详情页
            lis[i].onclick = function(){
                open('demo1_2.html?id='+this.id);
            }
        }
    </script>
</body>
</html>